<template>
  <div class="havedata">
    <div class="info" v-for="(item,index) in blacklistInfo" :key="index">
      <div class="infor">
        <div>员工姓名：<span class="xinxi">{{item.name}}</span></div>
        <div>联系电话：<span class="xinxi">{{$publicMethod.fuzzyDisplay(item.mobile, 3, 3)}}</span></div>
        <div>身份证号：<span class="xinxi">{{$publicMethod.fuzzyDisplay(item.card, 3, 3)}}</span></div>
      </div>
      <div class="infor">
        <div>上传时间：<span class="xinxi">{{item.add_time}}</span></div>
        <div>名单类型：<span class="xinxi">{{item.lost_type}}</span></div>
        <div>所属公司：<span class="xinxi">{{item.company}}</span></div>
        <div class="detail">
          <div class="cont" @click="detail(item.lost_id)">查看详情</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    props: {
      blacklistInfo: {},
      keyword: {},
      type: {},
    },
    created() {

    },
    methods: {
      detail(dataId) {      //查看详情
        this.$router.push({
          path: "./inquireDetail",
          query: {
            dataId: dataId,
          }
        });
      }
    }
  };
</script>

<style scoped>
  /* 头部 */

  .searchlist .my_header {
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    /* text-align: center; */
    line-height: 0.88rem;
    color: #fff;
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
    padding: 0 0.2rem;
    color: #ffffff;
  }

  .searchlist .my_header .cancel {
    color: #ffffff;
  }

  .searchlist .my_header i {
    font-size: 0.4rem;
    float: left;
    line-height: 0.88rem;
  }

  .searchlist .top1 {
    height: 0.88rem;
    line-height: 0.88rem;
  }

  .searchlist .goback {
    float: left;
  }

  .searchlist .my_input {
    width: 80%;
    float: left;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    background-color: rgba(0, 133, 240, 1);
    position: relative;
  }

  .searchlist .my_input input {
    height: 0.52rem;
    color: #333;
    font-size: 0.24rem;
    margin-bottom: 0;
  }

  .searchlist input[type="text"] {
    padding-top: 0.2rem;
    padding-left: 0.5rem;
  }

  .searchlist .my_img {
    width: 0.24rem;
    height: 0.24rem;
    position: absolute;
    left: 0.2rem;
    top: 0.34rem;
  }

  .searchlist .headcircle {
    width: 1.2rem;
    height: 1.2rem;
    text-align: center;
    margin: 0px auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    /* Firefox */
    -webkit-border-radius: 50%;
    /* Safari 和 Chrome http://www.manongjc.com/article/1214.html */
  }

  @media screen and (width: 320px) {
    .certificate .name > input {
      top: 30%;
    }
  }

  .searchlist .isdisplay {
    display: block !important;
  }

  .searchlist #ser {
    font-size: 0.28rem;
    position: absolute;
    left: 15%;
    color: #ccc;
  }

  .cancel {
    font-size: 0.28rem;
    font-weight: 500;
    color: #fff;
    float: right;
    padding-right: 0.1rem;
  }

  .searchlist {
    background-color: #fff;
  }

  /* 总计 */

  .havedata {
    /*display: none;*/
  }

  .total {
    height: 0.88rem;
    margin-top: 0.88rem;
    background-color: #fff;
    line-height: 0.88rem;
    padding: 0 0.3rem;
    border-bottom: 0.01rem solid #ccc;
  }

  .havedata .total .tol {
    float: left;
  }

  .havedata .all {
    font-size: 0.28rem;
    color: #999;
  }

  .havedata .all .peo {
    color: #333;
  }

  .havedata .total .area {
    float: right;
  }

  .havedata .area span {
    font-size: 0.28rem;
    color: #0085f0;
  }

  /* 员工信息 */

  .havedata .info {
    margin-top: 0.3rem;
  }

  .havedata .infor {
    width: 92%;
    height: 1.7rem;
    background-color: #fff;
    border: 0.01rem solid #ccc;
    margin: 0 auto;
    padding: 0.2rem;
    position: relative;
    border-bottom: 1px solid #ccc !important;
  }

  .havedata .infor:nth-child(2) {
    border-top: 0;
    border-bottom: 0;
  }

  .havedata .infor div {
    height: 0.45rem;
    font-size: 0.26rem;
    color: #999;
  }

  .havedata .infor .xinxi {
    color: #333;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 180px;
  }

  /* 查看详情 */

  .havedata .detail {
    display: inline-block;
    width: 0.64rem;
    height: 1.7rem;
    position: absolute;
    right: 0;
    top: 0;
  }

  .havedata .detail .cont {
    width: 0.26rem;
    height: 1.7rem;
    line-height: 15px;
    font-size: 0.26rem;
    color: #0085f0;
    padding: 0.25rem 0.15rem;
    border-left: 0.001rem solid #ccc;
  }

  /* 员工信息2 */

  .havedata .info2 {
    margin: 0.3rem 0;
  }

  .havedata .info2 .inform {
    border-bottom: 0.01rem solid #ccc;
  }

  /*黑名单样式*/

  .certificate {
    background-color: #f8f8f8;
    /*display: none;*/
  }

  /* 总计 */

  .certificate .area span {
    font-size: 0.28rem;
    color: #0085f0;
  }

  /* 查询结果 */

  .certificate .serresult {
    height: 0.88rem;
    margin-top: 0.2rem;
    line-height: 0.88rem;
    padding: 0 0.3rem;
    background-color: #fff;
  }

  .certificate .result {
    /* margin-top: .88rem; */
    font-size: 0.28rem;
    color: #0085f0;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
  }

  .result span {
    font-size: 0.34rem;
    color: #f40a0a;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
  }

  /* 输入证书信息 */

  .certificate .zsinfo {
    position: relative;
  }

  .certificate .zsinfo h5 {
    color: #999;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    padding: 0 0.3rem;
    margin: 0;
    padding-top: 0.41rem;
    margin-bottom: 0.24rem;
  }

  /* 头像 */

  .certificate .touxiang {
    height: 1.4rem;
    border-bottom: 0.001rem solid #ccc;
    background-color: #fff;
  }

  .certificate .padd-right {
    padding-right: 0.25rem;
    line-height: 1.4rem;
    background-color: #fff;
    overflow: hidden;
  }

  .certificate .namexm input {
    width: 50%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: right;
    position: absolute;
    right: 0.2rem;
    border: none;
  }

  .certificate .padd-name {
    height: 0.88rem;
    background-color: #fff;
    line-height: 0.88rem;
  }

  .certificate .padd-left {
    font-size: 0.3rem;
    color: #333;
    font-weight: 500;
    padding-left: 0.3rem;
  }

  .certificate .name {
    font-size: 0.25rem;
    color: #666;
    float: right;
    width: 16%;
    height: 1.4rem;
  }

  .certificate .name img {
    width: 1rem;
    height: 1rem;
  }

  .certificate .name > input {
    border: none;
    padding-top: 0.3rem;
    text-align: right;
    width: 19%;
    height: 1.5rem;
    position: absolute;
    right: 0.2rem;
    opacity: 0;
  }

  /* 默认使用账户信息 */

  .certificate .countinfo {
    font-size: 0.26rem;
    color: #0085f0;
    padding-right: 0.27rem;
    bottom: -65%;
    right: 0;
    position: absolute;
  }

</style>
